<template>
  <p>App</p>
  <Child :num="num" />
</template>

<script lang="ts">
import Child from "./Child.vue";
/*
  vue2的组件间通信：
    重要：
      1. props 父 -> 子
      2. 自定义事件 子 -> 父
      3. .sync 父 <-> 子
      4. v-model 父 <-> 子
      5. vuex 兄弟、祖孙
      6. 插槽 父 <-> 子
    次要：
      1. $attrs / $listeners
      2. $parent / $children / $refs
      3. 全局事件总线
      4. provide / inject 祖孙

  vue3的组件间通信：
    重要：
      1. props 父 -> 子
      2. 自定义事件 子 -> 父
      3. v-model 父 <-> 子
      4. vuex 兄弟、祖孙
      5. 插槽 父 <-> 子
      6. pinia （取缔vuex）
    次要：
      1. $attrs
      2. $parent / $refs
      3. provide / inject 祖孙
      4. 全局事件总线不能直接使用，移除$on\$once\$off
        由社区提供第三方库可以来使用 mitt

*/

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style scoped></style>
